---
type: tutorial
title: Создайте свой первый проект Astro
description: |-
  Учебное пособие: Создайте свой первый блог на Astro —
  Создайте новый проект для учебного пособия Astro и приступайте к написанию кода
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';


<PreCheck>
  - Запустить мастер настройки `create astro`, чтобы создать новый проект Astro
  - Запустить сервер Astro в режиме разработки (dev)
  - Увидеть предварительный просмотр вашего сайта в браузере
</PreCheck>

## Запуск мастера настройки Astro

Рекомендуемый способ создания нового сайта Astro — через наш мастер настройки `create astro`.

<Steps>
1. В командной строке своего терминала запустите следующую команду, используя ваш менеджер пакетов:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # создать новый проект с npm
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # создать новый проект с pnpm
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # создать новый проект с yarn
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Подтвердите `y`, чтобы установить `create-astro`
3. При запросе "Where would you like to create your new project?"(Где вы хотите создать новый проект?) введите имя папки, чтобы создать новый каталог для проекта, например
`./tutorial`

      :::note
      Новый проект Astro может быть создан только в абсолютно пустой папке, поэтому выберите для своей папки имя, которого еще не существует!
      :::

4. Вы увидите краткий список стартовых шаблонов для выбора. Используйте клавиши со стрелками (вверх и вниз) для перехода к шаблону «Empty», а затем нажмите клавишу Enter, чтобы отправить свой выбор.

5. Когда запрос спросит вас, планируете ли вы писать на TypeScript, введите `n`.

6. Когда появится вопрос "Would you like to install dependencies?"(Хотите ли вы установить зависимости?), введите `y`.

7. Когда появится запрос "Would you like to initialize a new git repository?"(Хотите ли вы инициализировать новый git-репозиторий?), введите `y`.
</Steps>

Когда мастер установки завершен, вам больше не понадобится этот терминал. Теперь вы можете открыть VS Code, чтобы продолжить.

## Откройте ваш проект в VS Code

<Steps>
8. Откройте VS Code. Вам будет предложено открыть папку. Выберите папку, которую вы создали в процессе мастера настройки.

9. Если вы впервые открываете проект Astro, вы должны увидеть уведомление, спрашивающее, хотите ли вы установить рекомендуемые расширения. Щелкните, чтобы увидеть рекомендуемые расширения, и выберите [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Это обеспечит подсветку синтаксиса и автозавершение кода в Astro.

10. Убедитесь, что терминал виден и что вы можете увидеть командную строку, например:

    ```sh
    user@machine:~/tutorial$
    ```

    :::tip[Сочетание клавиш]
    Чтобы переключить видимость терминала, используйте <kbd>Ctrl + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).
    :::

</Steps>

Теперь вы можете использовать терминал, встроенный прямо в это окно, а не приложение "Терминал" на вашем компьютере до конца этого пособия.



## Запуск Astro в режиме разработки

Чтобы просматривать файлы проекта _как веб-сайт_ во время работы, вам нужно, чтобы Astro работал в режиме разработки (dev).

### Запуск сервера разработки

<Steps>
11. Запустите команду для запуска Astro в режиме разработки, набрав в терминале VS Code:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>

    Теперь в терминале должно появиться подтверждение того, что Astro работает в режиме dev.  🚀
</Steps>

## Просмотрите предварительный вариант вашего сайта

Файлы вашего проекта содержат весь код, необходимый для отображения веб-сайта Astro, но браузер отвечает за отображение вашего кода в виде веб-страниц.

<Steps>
12. Щелкните на ссылке `localhost` в окне терминала, чтобы увидеть живой предварительный просмотр вашего нового сайта Astro! 

    (По умолчанию Astro использует `http://localhost:4321`, если доступен порт `4321`).

    Вот как должен выглядеть стартовый сайт Astro "Empty Project" в предварительном просмотре браузера:

    ![Пустая белая страница со словом Astro вверху.](/tutorial/minimal.png)

</Steps>

:::tip[Использование сервера разработки Astro]

Во время работы сервера Astro в режиме разработки вы НЕ сможете выполнять команды в окне терминала. Вместо этого на этой панели вы получите обратную связь в процессе предварительного просмотра сайта.

Вы можете остановить сервер разработки в любое время и вернуться к командной строке, нажав <kbd>Ctrl + C</kbd> в терминале.

Иногда сервер разработки останавливается самостоятельно во время работы. Если ваш предварительный просмотр перестал работать, вернитесь в терминал и перезапустите сервер разработки, набрав `npm run dev`.
:::

<Box icon="check-list">
## Чек-лист

<Checklist>
- [ ] Я могу создать новый проект Astro.
- [ ] Я могу запустить сервер разработки Astro.
</Checklist>
</Box>

### Ресурсы

- <p>[Начало работы с Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge>внешняя ссылка</Badge> — видеоурок для установки, настройки и работы с VS Code</p>
